<template>
	<view>
		<view class="tabBox">
			<scroll-view scroll-x="true" :scroll-left="scrollLeft" :scroll-with-animation="true">
				<view class="box">
					<view class="tabItem" v-for="(item,index) in monthList" :key="index"
						:class="{'ac':tabCurrent == index}" @click="tabChange(index,item.times)">
						<div class="tabItem_top">
							{{item.date}}
						</div>
						<div class="tabItem_time">
							{{item.weekday | filterweekday}}
						</div>
					<!-- 	<div class="tabItem_cont">
							{{item.count == 0?"暂无课程":item.count+"堂课" }}
						</div> -->
						<div class="tabItem_line ">

						</div>
					</view>

				</view>
			</scroll-view>
			<div class="listDown">
				<u-icon name="arrow-down" v-if="!show" size='18' @click='openDown()'></u-icon>
				<u-icon name="arrow-up" v-else size='18' @click='openDown()'></u-icon>
			</div>

		</view>

	</view>
</template>

<script>
	export default {
		props: {
			monthList: [String, Array],
			show:[Boolean,String],
			FtabCurrent:[Boolean,String,Number]
		},
		filters: {
			filterweekday(v) {
				console.log('filtersfilters', v)
				var s = ''
				switch (v) {
					case '0':
						s = '今天'
						break;
					case '1':
						s = '周一'
						break;
					case '2':
						s = '周二'
						break;
					case '3':
						s = '周三'
						break;
					case '4':
						s = '周四'
						break;
					case '5':
						s = '周五'
						break;
					case '6':
						s = '周六'
						break;
					case '7':
						s = '周日'
						break;
				}
				return s
			},
			filteTime(timestamp) {
				const date = new Date(timestamp); // 如果timestamp是数值，直接使用；如果是字符串，确保是数值字符串
				const month = (date.getMonth() + 1).toString().padStart(2, '0');
				const day = date.getDate().toString().padStart(2, '0');
				return ` ${month}-${day}`;
			}
		},
		watch:{
			FtabCurrent(newVal,oldVale){
			   	console.log("tabChangetabChange",newVal)
				this.tabCurrent = newVal
			}
		},
		data() {
			return {
				itemWidth: 0, //每个item的宽度
				scrollLeft: 0, //滑动距离
				tabCurrent: 0, //默认当前月份
				sendMonth: '',
				show: true,
				// monthList: [{
				// 	id: 1,
				// 	month: '1月月月月月月'
				// }, {
				// 	id: 2,
				// 	month: '2月月'
				// }, {
				// 	id: 3,
				// 	month: '3月'
				// }, {
				// 	id: 4,
				// 	month: '4月月月月月月月月月'
				// }, {
				// 	id: 5,
				// 	month: '5月月月月'
				// }, {
				// 	id: 6,
				// 	month: '6月'
				// }]
			}
		},
		mounted() {
			// 先获取当前时间的月份
			let date = new Date();
			this.tabCurrent = 0
			// this.tabCurrent = date.getMonth(); // getMonth()返回的月份从0开始  正好符合tabCurrent  不用再加1了
			this.sendMonth = date.getMonth() + 1; // 初次加载，传当前月份
			setTimeout(() => {
				this.$nextTick(() => {
					const query = uni.createSelectorQuery().in(this);
					query.select('.tabItem').boundingClientRect(data => {
						// item宽度 = 自身宽度 + 8px右边距
						this.itemWidth = data.width;
						this.scrollLeft = this.itemWidth * (this.tabCurrent - 1);
					}).exec();
				})
			}, 1000)

		},
		methods: {

			// 点击tab切换高亮，并进行滑动，（index-1）是为了点击项显示在第二栏的位置
			tabChange(index, time) {
				this.tabCurrent = index;
				// 传参的月份
				// this.sendMonth = this.monthList[index].id
				this.scrollLeft = this.itemWidth * (index - 1);
				console.log('scrollLeft', this.scrollLeft);
				this.$emit('tabChange', time)
			},
			openDown() {
				this.$emit('openDown')
			}
		}
	}
</script>
<style lang="scss">
	.tabBox {
		background: #ffffff;

		/* 隐藏滚动条样式 */
		::-webkit-scrollbar {
			width: 0;
			height: 0;
		}

		.box {
			min-width: 100rpx;
			margin: 0 5rpx;
			display: flex;
			align-items: center;
			height: 208rpx;

			.tabItem {
				flex-shrink: 0;
				text-align: center;
				width: auto;
				min-width: 160rpx;
				// display: inline-block;
				width: auto;
				text-align: center;
				padding: 16rpx 0rpx;
				/* border: 1px solid #ccc; */
				margin-left: 26rpx;
				box-sizing: border-box;
				border-radius: 36rpx;
				// background: #E4E4E4;
				font-size: 32rpx;
				color: #666;

				.tabItem_top {
					margin-bottom: 14rpx;
					font-weight: 600;
				}

				.tabItem_time {
					margin-bottom: 12rpx;
					font-weight: 600;
				}

				.tabItem_cont {
					margin-bottom: 12rpx;
					font-size: 26rpx;
				}

				.tabItem_line {
					width: 66rpx;
					height: 8rpx;
					background: #fff;
					margin: 0 auto;
				}

			}

			.ac {
				// background: #9013FE;
				font-size: 32rpx;
				color: #9013FE;

				.tabItem_line {
					width: 66rpx;
					height: 8rpx;
					background: #9013FE;
					margin: 0 auto;
				}
			}
		}

		.listDown {
			display: flex;
			align-items: center;
			justify-content: center;
			padding: 0 0 25rpx 0;
		}
	}
</style>